<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../lib/doc.css">
    <link rel="stylesheet" href="../lib/main.css">
    <link rel="stylesheet" href="../v1.x/crazyTable/crazyTable.css">
    <title>crazyTable</title>

</head>
<body>

<div class="doc-layout">
    <!-- 左侧导航栏 -->
    <div class="crazy-side">
        <h1>CrazyTable</h1>
        <ul>
            <li><a href="../index.html">介绍</a></li>
            <li><a href="crazyTable.html">安装和使用</a></li>
            <li><a href="crazyFilter.html">1.表格过滤</a></li>
            <li><a href="crazyEdit.html" class="crazy-this">2.单元格编辑</a>
                <div>
                    <ul>
                        <li><a href="#show">- 展示效果</a></li>
                        <li><a href="#code">- 代码</a></li>
                        <li><a href="#editConfig">- editConfig 参数</a></li>
                        <li><a href="#http">- http 参数说明</a></li>
                        <li><a href="#before">- before 说明</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="crazyChild.html">3.子表扩展</a></li>
            <li><a href="crazyBox.html">Box数据说明</a></li>
        </ul>
    </div>

    <!-- 正文 -->
    <div class="doc-content" id="doc-content">
        <div class="layui-main">
            <h1 class="doc-h1">单元格编辑/转换</h1>
            <div class="layui-text">
                单元格编辑和转换。会在单元格右侧增加一个 <i class="layui-icon layui-icon-edit layui-blue"></i> 的图标。点击 <i
                    class="layui-icon layui-icon-edit layui-blue"></i> ，弹出一个box。所有的操作都在这个box里面。
            </div>

            <!-- 1 -->
            <div id="show">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>展示效果</legend>
                </fieldset>
                <div class="layui-text">
                    可以点击表头右侧的 <i class="layui-icon layui-icon-edit layui-blue"></i> 图标，自己亲自测试一下效果。这里仅演示本地筛选的效果。
                    <li>你可以敲击一下键盘的<em>“回车键”</em>，看看有啥效果？</li>
                </div>
                <table class="layui-table layui-btn-group table_list layui-hide" id="mainList"
                       lay-filter="test"></table>
            </div>

            <!-- 2 -->
            <div id="code">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>代码</legend>
                </fieldset>
                <div class="layui-text">在options中添加 <em>httpConfig</em>，并在cols相应的field中添加 <em>editConfig</em> 参数</div>
                <pre class="layui-code" lay-encode="true">
    // 朝代：数据字典
    const Dynasty = [
        {"key": 1, "value": "五代"},
        {"key": 2, "value": "唐代"},
        {"key": 3, "value": "宋代"},
        {"key": 4, "value": "元代"},
        {"key": 5, "value": "明代"},
        {"key": 6, "value": "清代"}
    ];

    // 初始化 tbOptions，
    let tbOptions = {
        elem: '#mainList',
        url: 'data-filter.json',
        method: 'get',
        toolbar: true, //开启头部工具栏，并为其绑定左侧模板
        title: '诗歌表',
        totalRow: true,
        even: true,
        cols: [[
            {type: 'checkbox'},
            {type: 'numbers', title: 'ID', width: 50},
            {
                field: 'title', title: '诗歌名', width: 150,
                editConfig: {type: 'radio', verify: "required|abc"}
            },
            {
                field: 'dynasty', title: '朝代', width: 100,
                editConfig: {type: 'radio', verify: "required", dict: Dynasty}
            },
            {
                field: 'author', title: '诗人', width: 100,
                editConfig: {type: 'input', verify: "required|abc"}
            },
            {field: 'content', title: '诗歌', width: 100},
            {
                field: 'heat', title: '热度', width: 100, totalRow: true,
                editConfig: {type: 'input', verify: "required|integer"}
            },
            {
                field: 'createTime', title: '创建时间', width: 200,
                // 注意这里的 时间格式format中两个参数设置的不同
                editConfig: {type: 'datetime', format: {show: 'yyyy-MM-dd HH:mm:ss', req: 'int'}},
            },
        ]],
        page: false,

        httpConfig: {
            pkey: {field: 'id', name: 'id'},
            update: {mode: 'local', url: '/update.html', method: 'get', jump: false},
            delete: {mode: 'local', url: '/delete.html', method: 'get', where: {'is_del': 1}, jump: false},
            read: {mode: 'local', url: '/read.html', method: 'get', jump: true, success: ''},
            create: {mode: 'local', url: '/create.html', method: 'get', where: {'id': 0}, jump: true},
        },

        done: function (res, curr, count) {
            let othis = this;
            layui.use('crazyTable', function () {
                layui.crazyTable.render(othis, res); // 注意：引入这两个参数
            });
        },
    };
    let insTb = table.render(tbOptions); // table 渲染
            </pre>
            </div>

            <!-- 3 -->
            <div id="editConfig">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>editConfig 参数说明</legend>
                </fieldset>

                <!--<h4><span class="layui-badge-dot"></span> 安装</h4>-->
                <div class="layui-text">在原来的table options 的基础上，增加如下配置项。基本上和<em>filter筛选功能的参数</em>差不多</div>

                <table class="layui-table">
                    <colgroup>
                        <col width="120">
                        <col>
                        <col width="120">
                        <col width="200">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>参数选项</th>
                        <th>说明</th>
                        <th>类型</th>
                        <th>默认值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>type</td>
                        <td class="layui-text">
                            配置box中输入框的格式，一共支持：input, checkbox, radio，select，datetime
                            <ul>
                                <li><em>input</em> 普通输入框。</li>
                                <li><em>checkbox</em> 复选框。</li>
                                <li><em>radio</em> 单选框。</li>
                                <li><em>select</em> 下拉框。</li>
                                <li><em>datetime</em> 日期框。</li>
                            </ul>
                            详见 <em>layui form</em>。
                        </td>
                        <td>string</td>
                        <td>"input"</td>
                    </tr>
                    <tr>
                        <td>format</td>
                        <td class="layui-text">
                            当<em>type=datetime</em> 的时候，该字段有效。设置显示格式。
                            <ul>
                                <li><em>show</em> 在表格中显示的时间格式</li>
                                <li><em>req</em> 发送http请求用的时间格式</li>
                            </ul>
                            <ul></ul>
                            【注意】：这个时间格式，支持 <em>int</em>，以及其他符合laydate 的时间格式，比如<em>'yyyy-MM-dd HH:mm:ss'</em>
                            <ul>
                                <li><em>int</em> 时间戳（秒）</li>
                                <li><em>yyyy-MM-dd HH:mm:ss</em> 符合laydate 的时间格式</li>
                            </ul>
                            <ul></ul>
                            【说明】：很多时间，我们在数据表中，是保存时间戳。但是在页面上，肯定是显示年月日这样的方式。因此专门设计<em>show, req</em> 两个参数，专门来区分。
                        </td>
                        <td>object</td>
                        <td>{show: 'yyyy-MM-dd HH:mm:ss', req: 'int'}</td>
                    </tr>
                    <tr>
                        <td>mode</td>
                        <td class="layui-text">
                            数据请求方式, <em>local（默认）, api</em>。暂不支持不同字段配置不同的筛选方式
                            <ul>
                                <li>local <em>本地筛选（默认）</em></li>
                                <li>api <em>服务器筛选（一定要配置httpConfig）</em></li>
                            </ul>
                        </td>
                        <td>string</td>
                        <td>"local"</td>
                    </tr>
                    <tr>
                        <td>field</td>
                        <td>table 中字段名。字段名的设定非常重要，且是表格数据列的唯一标识。无需设置，会自动获取当前列的field，除非该列无field</td>
                        <td>string</td>
                        <td>username</td>
                    </tr>
                    <tr>
                        <td>name</td>
                        <td>对应field，是http请求时候的字段名。如果不设置，则=field</td>
                        <td>string</td>
                        <td>username</td>
                    </tr>
                    <tr>
                        <td>dict</td>
                        <td class="layui-text">该字段对应的数据字典。默认格式如下：
                            <pre class="layui-code"
                                 lay-encode="true">dict: [{key: '', value: ''}, {key: '', value: ''},] </pre>
                            <ul>
                                <li>key <em>字典索引</em></li>
                                <li>value <em>字典取值</em></li>
                            </ul>
                        </td>
                        <td>Object</td>
                        <td>[{key: '', value: ''}, {key: '', value: ''},]</td>
                    </tr>
                    <tr>
                        <td>httpType</td>
                        <td>取值对应 <em>httpConfig 中的 update/create/read/delete</em>。如果设置了该选项，则从httpConfig 中获取对应的http 配置项。
                        </td>
                        <td>string</td>
                        <td>'read'</td>
                    </tr>
                    <tr>
                        <td>http</td>
                        <td>可以单独设置http相关参数。如果设置httpConfig，则两者合并，且http 覆盖前者</td>
                        <td>Object</td>
                        <td>详见 http 参数</td>
                    </tr>
                    <tr>
                        <td>edit</td>
                        <td>单元格是否支持编辑。默认=true。如果是false，则不开启编辑，但对于枚举类型的转换仍然完成</td>
                        <td>boolean</td>
                        <td>true</td>
                    </tr>
                    <tr>
                        <td>before</td>
                        <td class="layui-text">
                            在提交编辑前，先完成的事件。详见<em>before 说明</em>
                        </td>
                        <td>Function</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>verify</td>
                        <td class="layui-text">开启单元格校验。功能等同于 <em>form lay-verify</em>。目前在lay-verify原基础上，新增自定义如下
                            <ul>
                                <li>required <em>必填</em></li>
                                <li>abc <em>只能填写字母、数字及下划线</em></li>
                                <li>email <em>邮箱格式</em></li>
                                <li>phone <em>中国手机号格式</em></li>
                                <li>number <em>只能填写数字</em></li>
                                <li>integer <em>只能填写整数</em></li>
                                <li>positive_integer <em>只能填写正整数</em></li>
                                <li>negative_integer <em>只能填写负整数</em></li>
                            </ul>

                            <pre class="layui-code" lay-encode="true">verify: "required|integer" </pre>
                            支持多个规则并存，用 <em>|</em> 分割
                        </td>
                        <td>string</td>
                        <td>"required|integer"</td>
                    </tr>
                    <tr>
                        <td>verType</td>
                        <td class="layui-text">用于定义异常提示层模式。功能等同于 <em>form lay-verType</em>。
                            <ul>
                                <li>tips <em>吸附层</em></li>
                                <li>alert <em>对话框</em></li>
                                <li>msg <em>默认</em></li>
                            </ul>
                        </td>
                        <td>string</td>
                        <td>tips</td>
                    </tr>
                    <tr>
                        <td>reqText</td>
                        <td class="layui-text">用于自定义必填项（即设定了 lay-verify="required" 的表单）的提示文本。功能等同于 <em>form lay-reqText</em>。
                        </td>
                        <td>string</td>
                        <td>任意字符</td>
                    </tr>
                    <tr>
                        <td>placeholder</td>
                        <td class="layui-text">如果没有定义，则由系统根据规则默认生成对应字符串。
                        </td>
                        <td>string</td>
                        <td>任意字符</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!-- 4 -->
            <div id="http">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>http 配置</legend>
                </fieldset>
                <h4><span class="layui-badge-dot"></span> 示例</h4>
                <pre class="layui-code" lay-encode="true">http: {mode: 'api', url: '/update.html', method: 'get', jump: false}</pre>

                <table class="layui-table">
                    <colgroup>
                        <col width="120">
                        <col>
                        <col width="120">
                        <col width="200">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>参数选项</th>
                        <th>说明</th>
                        <th>类型</th>
                        <th>默认值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>mode</td>
                        <td class="layui-text">
                            设置请求模式。
                            <ul>
                                <li>api <em>发起 http 请求</em></li>
                                <li>local <em>本地处理，不请求服务器</em></li>
                            </ul>
                        </td>
                        <td>string</td>
                        <td>"api"</td>
                    </tr>
                    <tr>
                        <td>url</td>
                        <td>发起http请求的链接<em>如果mode=api，必填</em>
                        </td>
                        <td>string</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>method</td>
                        <td>http请求的方式，仅支持get、post<em>非必填</em>
                        </td>
                        <td>string</td>
                        <td>"get"</td>
                    </tr>
                    <tr>
                        <td>where</td>
                        <td class="layui-text">
                            http请求的时候，需要额外带上的参数<em>非常有用的一个参数</em>
                            <ul>
                                <li><em>比例“软删除”</em> 常见做法： <em>is_del=1</em>。</li>
                                <pre class="layui-code" lay-encode="true"> { delete: {where: {'is_del': 1}} }</pre>
                                <li><em>比例“创建”</em> 常见做法： <em>id=0</em>。</li>
                                <pre class="layui-code" lay-encode="true"> { create: {where: {'id': 0}} }</pre>
                            </ul>
                            <em>后续计划：</em> 支持 function
                        </td>
                        <td>string</td>
                        <td>{ delete: {where: {'is_del': 1}} }</td>
                    </tr>
                    <tr>
                        <td>jump</td>
                        <td class="layui-text">http请求的方式，仅支持ajax, href<em>非必填</em>
                            <ul>
                                <li><em>false = ajax</em> 就是ajax请求，页面并不跳转。</li>
                                <li><em>true = href</em> 就是 window.location.href。</li>
                            </ul>
                        </td>
                        <td>boolean</td>
                        <td>false</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!-- 5 -->
            <div id="before">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>before 说明</legend>
                </fieldset>
                <div class="layui-text">我们给表头增加了 <em>批量编辑</em> 的功能。</div>
                <div class="layui-text">
                    <ul>
                        <li>前提：需要table 中有一列checkbox 列。</li>
                        <li>而 <em>before</em> 参数，就是在执行批量编辑前的特殊处理。你可以在这方法内执行任何你想要在“批量编辑”动作发生前先完成的事件。</li>
                        <li><em>注意：</em> 一定要返回where 参数。</li>
                    </ul>
                </div>

                <h4><span class="layui-badge-dot"></span> 示例</h4>
                <pre class="layui-code" lay-encode="true">
    // 在确认按钮提交前的处理，返回where条件。values:当前取值, cell:当前单元格, row:选中行数据
    before: function (opt) {
        console.log('进入 filter Before, opt', opt);
        let rows = opt.row; // 当前选中行的数据
        let values = opt.values; // 当前过滤窗口设置的值，对象，包含 show, req
        let cell = opt.cell; // 当前操作的单元格（这里是指正在进行批量编辑的列表头）
        let trs = opt.tr; // 当前勾选的行的jQuery对象
        let where = opt.where || {}; // 当前已经设置的http 请求的 where 参数
        return opt.where; // 注意：最后一定要返回 where
    }
                </pre>

            </div>

            <!-- footer -->
            <div class="crazy-footer"></div>

        </div>
    </div>
</div>
<script type="text/javascript" src="../lib/layui/layui.all.js"></script>

<script>
    const TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';  // 默认日期格式

    // 朝代：数据字典
    const Dynasty = [
        {"key": 1, "value": "五代"},
        {"key": 2, "value": "唐代"},
        {"key": 3, "value": "宋代"},
        {"key": 4, "value": "元代"},
        {"key": 5, "value": "明代"},
        {"key": 6, "value": "清代"}
    ];
</script>

<script>

    var table = layui.table;

    // 自定义模块，这里只需要开放 crazyTable 即可
    layui.config({
        base: '../v1.x/crazyTable/',   // 模块所在目录
    }).extend({
        crazyTable: 'crazyTable'  // 模块别名
    });

    // 初始化 tbOptions，
    let tbOptions = {
        elem: '#mainList',
        url: 'data-edit.json',
        method: 'get',
        toolbar: true, //开启头部工具栏，并为其绑定左侧模板
        title: '诗歌表',
        totalRow: true,
        even: true,
        cols: [[
            {type: 'checkbox'},
            {type: 'numbers', title: 'ID', width: 50},
            {
                field: 'title', title: '诗歌名', width: 150,
                editConfig: {type: 'radio', verify: "required"}
            },
            {
                field: 'dynasty', title: '朝代', width: 100,
                editConfig: {type: 'radio', verify: "required", dict: Dynasty}
            },
            {
                field: 'author', title: '诗人', width: 100,
                editConfig: {type: 'input', verify: "required|abc"}
            },
            {field: 'content', title: '诗歌', width: 100},
            {
                field: 'heat', title: '热度', width: 100, totalRow: true,
                editConfig: {type: 'input', verify: "required|integer"}
            },
            {
                field: 'createTime', title: '创建时间', width: 200,
                // 注意这里的 时间格式format中两个参数设置的不同
                editConfig: {type: 'datetime', format: {show: 'yyyy-MM-dd HH:mm:ss', req: 'int'}},
            },
        ]],
        page: false,

        httpConfig: {
            pkey: {field: 'id', name: 'id'},
            update: {mode: 'local', url: '/update.html', method: 'get', jump: false},
            delete: {mode: 'local', url: '/delete.html', method: 'get', where: {'is_del': 1}, jump: false},
            read: {mode: 'local', url: '/read.html', method: 'get', jump: true, success: ''},
            create: {mode: 'local', url: '/create.html', method: 'get', where: {'id': 0}, jump: true},
        },

        done: function (res, curr, count) {
            let othis = this;
            layui.use('crazyTable', function () {
                layui.crazyTable.render(othis, res); // 注意：引入这两个参数
            });
        },
    };
    let insTb = table.render(tbOptions); // table 渲染


</script>

</body>
</html>